<template>
    <div class="left_box_1">
        <div class="top_box">
            月度劳务评价排名
        </div>

        <div class="right_box">
            <div class="right_box_tab">
                <div @click="swithTabs(item,index)" v-for="(item,index) in indexs" :key="index" :class="[index == tabsInitNum ? 'active' : 'inactive']"> {{item.name}}</div>
            </div>

            <div class="echarts" style="width: 100%; height: 100%;" ref="chart"></div>
        </div>

    </div>

</template>

<script>
let Echarts = require('echarts/lib/echarts'); //基础实例 注意不要使用import
require('echarts/lib/chart/pie'); //按需引入 bar = 柱状图
export default {
    name: "index",
    data() {
        return {
            tabsInitNum: '1', // tabs初始化 - 倒序

            // Tabs集合
            indexs: [
                {
                    name: '正序',
                    type: 'asc'
                },
                {
                    name: '倒序',
                    type: 'desc'
                },
            ],
        };
    },
    methods: {

        // 切换tabs
        swithTabs(item, index) {
            this.tabsInitNum = index
        },


        init() {
            //2.初始化
            this.chart = Echarts.init(this.$refs.chart);
            //3.配置数据
            let option = {
                tooltip: {},
                grid: {
                    top: '10%',  // 组件离容器上侧的距离,百分比字符串或整型数字
                    left: '5%',    // 组件离容器左侧的距离,百分比字符串或整型数字
                    right: '15%',
                    bottom: '17%',
                    // containLabel: true //grid 区域是否包含坐标轴的刻度标签，
                },
                dataZoom: [//滑动条
                    {
                        top: '0%',
                        right: '5%',
                        yAxisIndex: 0,//这里是从X轴的0刻度开始
                        show: true,//是否显示滑动条，不影响使用
                        type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
                        backgroundColor: "rgba(193,44,31,0.6)",
                        startValue: 0, // 从头开始。
                        height: 180,
                        width: 0,
                        endValue: 2, // 一次性展示2个。
                        bottom: '30%',
                        zoomLock: true,
                        borderColor: 'transparent',
                    }
                ],
                yAxis: {
                    show: false,
                    data: ["肥东县崎辉装饰材料厂", "安徽省程固建筑加固工程有限公司", "安徽朗沃建筑劳务有限公司", "滁州市晨风保洁服务有限公司", "滁州市腾跃建筑劳务有限公司", "安徽匠诚建筑劳务有限公司", "滁州市万程建筑劳务有限公司", "滁州市世红建筑劳务有限公司", "安徽昌泰消防工程有限公司"]

                },
                xAxis: {

                    min: 0,
                    max: 100,
                    interval: 100,
                    splitLine: {
                        show: true,
                        lineStyle: {
                            type: 'dashed',
                            color: '#CA5844'
                        }
                    },
                },
                series: [{
                    type: 'bar',
                    barMaxWidth: 20,
                    stack: '业务',
                    data: [100, 100, 100, 100, 100, 100, 100, 100, 100],
                    label: {
                        show: true,
                        offset: [5, -15],
                        position: 'center',
                        left: '0%',
                        color: '#FFFFFF',
                        fontWeight: "bold",
                        fontSize: 14,
                        formatter: function (params) {
                            return params.name
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: function (params) {
                                let colorList = ['#2560F7', '#03FAFB', '#FA9F10', '#FFEE3F', '#DF1278',];
                                let index = params.dataIndex % colorList.length;
                                return colorList[index];
                            },
                        }
                    }

                },

                ]
            };


            // 4.传入数据
            this.chart.setOption(option);
        },

    },

    mounted() {
        this.init()
    }
};
</script>

<style scoped="scoped">
.left_box_1 {
    border: 1px solid #258add;
    background-color: rgb(13, 25, 45);
    display: flex;
    height: 100%;
    width: 100%;
    position: relative;
}
.top_box {
    position: absolute;
    left: 30px;
    top: -10px;
    color: #03fafb;
    font-size: 15px;
    text-shadow: 0 0 0.5rem #00d8ff;
}
.left_box {
    margin: 10px 0px 10px 30px;
    width: 20%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-around;
}
.left_box_item {
    display: flex;
    align-items: center;
}
.left_box_item img {
    width: 35px;
    height: 35px;
}
.left_box_item_title {
    margin-left: 10px;
}
.left_box_item_title_num {
    font-size: 14px;
    font-weight: bold;
    color: #fff;
}
.left_box_item_title_txt {
    font-size: 13px;
    color: #9ca1aa;
}

.right_box {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    width: 100%;
    margin: 10px;
    background-color: rgb(13, 25, 45);
}
.right_box_tab {
    background-color: rgb(13, 25, 45);
    width: 100%;
    display: flex;
    justify-content: flex-end;
    font-size: 13px;
}
.right_box_tab div {
    padding: 5px 7px;
    cursor: pointer;
}
</style>
